<%
layout("head.html",{title:"发布需求"}){
%>
<style type="text/css">
    .content{
        /*主页面div*/
        margin-top: 100px;background-color: #eee;
    }
    #left {
        /*二维码图片展示父级别元素*/
        width: 200px;height: 200px;float: left;position: absolute;margin-left: 100px;margin-top: 10%;
    }
    #descript{
        /*二维码上方提示文字*/
        text-align: right;font-weight: bold
    }
    #qr{
        /*二维码图片区*/
        width: 300px;height: 300px;margin-top: 8%
    }
    #pay_money_input{
        /*手动输入金额*/
        font-size: 16px;height: 45px;width:60%
    }

</style>
<div class="content">
    <div id="left" hidden>
        <p id="descript">请扫描图中的二维码付款</p>
        <div id="qr"></div>
    </div>
    <form class="layui-form" style="text-align: -webkit-center;" id="require_form">
        <table style="width: 600px">
            <tr class="">
                <td>
                    <div class="require_title" style="line-height: 40px">
                        <span class="">发布需求顾问</span>
                    </div>
                </td>
                <td style="text-align: right">
                    <div class="require_title" style="line-height: 40px">
                        <span class="pub_explan" style="font-size: 13px">发布说明</span>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <span style="color:red;">*</span>
                    <span class="require_input_label">标题：</span>
                    <input type="text" placeholder="咨询问题" name="title" class="table_input_name layui-input" id="title">
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2">
                    <span style="color:red;">*</span>
                    <span class="require_input_label">领域：</span><br>
                    <select class="serve_date" style="width: 332px;height: 50px;" id="serve_select" lay-filter="domain"
                            id="domain">
                        <option>请选择领域</option>
                        <option>微服务</option>
                        <option>SpringBoot</option>
                    </select>
                    <input hidden name="domain" id="hidden_domain"/>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2">
                    <span class="require_input_label">需求描述：</span><br>
                    <textarea id="edit" class="layui-textarea"></textarea>
                    <textarea name="content" id="hiddenText" hidden></textarea>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <span style="color:red;">*</span>
                    <span class="require_input_label"> 达者等级：</span><br>
                    <select class="serve_date" style="width: 332px;height: 50px;" lay-filter="grade" id="grade">
                        <option>请选择等级</option>
                        <option>达者</option>
                        <option>专家</option>
                        <option>大V</option>
                    </select>
                    <input hidden name="grade" id="hidden_grade" hidden="hidden"/>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <span style="color:red;">*</span>
                    <span class="require_input_label">支付金额：</span><br>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            1元<input type="radio" class="pay_money" value="1" name="id" lay-filter="pay_money">
                            其它<input type="text" id="pay_money_input" class="pay_money_input  pay_money"
                                     lay-verify="vnumber"placeholder="￥元">
                        </div>
                    </div>
                    <input name="payMoney" id="hidden_pay_money" hidden="hidden"/>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    <span style="color:red;">*</span>
                    <span class="require_input_label">付款类型：</span><br>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="radio" value="0" title="支付宝" name="sex" lay-filter="pay_type">
                            <input type="radio" value="1" title="微信" name="sex" lay-filter="pay_type">
                        </div>
                    </div>
                    <input name="payType" id="hidden_pay_type" hidden="hidden"/>
                </td>
                <td></td>
            </tr>
        </table>
    </form>
</div>
<script type="text/javascript">
    layui.use(['form', 'layedit', 'jquery'], function () {
        var layedit = layui.layedit;
        var form = layui.form;
        var $ = jQuery = layui.$;
        //更新全部
        form.render();
        var index = layedit.build('edit', {
            //设置编辑器高度
            height: 120,
            //清除一些工具
            hideTool: ["link", "image", "face"]

        });
        //监听支付类型按钮 且提交订单
        form.on('radio(pay_type)', function (data) {
            if (checkForm()) {
                $("#hidden_pay_type").val(data.value);
                var ajaxStatus = true;
                var text = layedit.getContent(index);
                $("#hiddenText").val(text);
                if (ajaxStatus) {
                    ajaxStatus = false;
                    $.ajax({
                        type: 'post',
                        url: '/Counselling/addCounselling',
                        async: false,
                        dataType: 'json',
                        data: $('#require_form').serializeObjects(),
                        success: function (data) {
                            if (data.success) {
                                ajaxStatus = true;
                                getQR(data);
                            } else {
                                ajaxStatus = true;
                                layerDef('发布失败！', 2);
                            }
                        }
                    });
                }
            }
        });
        //监听支付金额
        form.on('radio(pay_money)', function (data) {
            var hpm=$("#hidden_pay_money");
            if (!isEmpty(data.value)) {
                hpm.val(data.value);
                $("#pay_money_input").val('');
            }
        });
        //监听领域下拉框
        form.on('select(domain)', function (data) {
            $("#hidden_domain").val(data.value);
        });
        //监听等级下拉框
        form.on('select(grade)', function (data) {
            $("#hidden_grade").val(data.value);
        });
        //实时监听手动输入金额框
        $(".pay_money_input").bind("input propertychange",function(event){
            var radioObj=$('input:radio[name=id]')[0];
            //如何手选开启-》true则关闭它-》false
            if(radioObj.checked){
                radioObj.checked= false;
                form.render('radio');
            }
            if(checkMoneyIsSuccess($(this))){
                $("#hidden_pay_money").val($(this).val());
            }else{
                layerDef("请填写正确的金额",5);
            }
        });

        //手动表单验证
        function checkForm() {
            var dd = $(".layui-anim-upbit .layui-this");
            var title = $("#title");
            var domain = $("#hidden_domain");
            var grade = $("#hidden_grade");
            if (!inputIsCheckSuccess(title.val())) {
                cancelRadio($('input:radio[name=sex]'));
                form.render('radio');
                title.focus();
                layerDef('请输入标题内容', 5);
                return false;
            }
            if (!inputIsCheckSuccess(domain.val())) {
                cancelRadio($('input:radio[name=sex]'));
                form.render('radio');
                layerDef('请选择领域', 5);
                return false;
            }
            if (!inputIsCheckSuccess(grade.val())) {
                cancelRadio($('input:radio[name=sex]'));
                form.render('radio');
                layerDef('请选择达者等级', 5);
                return false;
            }
            if (isEmpty($("#hidden_pay_money").val())) {
                cancelRadio($('input:radio[name=sex]'));
                form.render('radio');
                checkMoneyIsSuccess($("#hidden_pay_money"));
                layerDef('请选择付款金额！', 5);
                return false;
            }
            return true;
        }

        //获取二维码
        function getQR(data) {
            //获取支付宝二维码
            $.ajax({
                type: 'post',
                url: '/api/pay/alipayTradePrecreate',
                data: {
                    subject: data.data.title,
                    outTradeNo: data.data.orderNo,
                    totalAmount: data.data.payMoney,
                    notifyUrl: data.data.isReceipt
                },
                dataType: 'json',
                success: function (data) {
                    if (data.resultFlag) {
                        $("#left").prop("hidden", false);
                        $('#qr').qrcode({
                            background: "#FFF",
                            text: data.responseData
                        });
                    } else {
                        layerDef("二维码获取失败", {icon: 5});
                    }
                },
                error: function () {
                    layerDef("请求异常", {icon: 5});
                }
            });
            /*
            * 定时查询支付接口，交易成功则跳转
            **/
            var interval = setInterval(function () {
                $.ajax({
                    url: "/api/pay/queryAliPayStatus",
                    type: "post",
                    data: {
                        outTradeNo: data.data.orderNo
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.resultFlag && data.responseData == 'TRADE_SUCCESS') {
                            layerDef("支付成功", {icon:1});
                            window.location.href = "/Counselling/queryCounseModelAndView";
                        }
                    },
                    error: function (data) {
                        lclearInterval(interval);
                    }
                });
            }, 4000);
        }

        //取消radio选中
        function cancelRadio(jq) {
            for (var i = 0; i < jq.length; i++) {
                jq[i].checked = false;
            }
        }
    });
</script>
<%}%>